<template>
  <div class="hqcard">
    <Card dis-hover :bordered="false">
      <jgsearch
        :searchData="searchData"
        @on-enter="askDatasearch"
        @on-clear="askDatasearch"
        @on-change-change="askDatachanges"
        @on-change-changetime="askDatachangestime"
        @on-change-changeDepartment="changeDepartmentFun"
      >
        <template v-slot:timeButton>
          <div v-if="booltimeButton">
            <Button
              @click="timeButtons(10)"
              :type="timeButton == 10 ? 'primary' : 'default'"
              :ghost="timeButton == 10"
              class="ivu-mr-8"
              >近10天</Button
            >
            <Button
              @click="timeButtons(30)"
              :type="timeButton == 30 ? 'primary' : 'default'"
              :ghost="timeButton == 30"
              class="ivu-mr-8"
              >近30天</Button
            >
            <Button
              @click="timeButtons(90)"
              :type="timeButton == 90 ? 'primary' : 'default'"
              :ghost="timeButton == 90"
              >近90天</Button
            >
          </div>
        </template>
        <template v-slot:checkbox>
          <div
            style="display: flex;align-items: center;justify-content: center;"
          >
            <CheckboxGroup @on-change="checkbox3">
              <Checkbox label="重复"></Checkbox>
            </CheckboxGroup>
            <CheckboxGroup v-if="ceshiButton" @on-change="checkbox5">
              <Checkbox label="测试"></Checkbox>
            </CheckboxGroup>
          </div>
        </template>
        <template v-slot:checkbox1>
          <div
            style="display: flex;align-items: center;justify-content: center;"
          >
            <CheckboxGroup @on-change="checkbox4">
              <Checkbox label="无效/测试"></Checkbox>
            </CheckboxGroup>
          </div>
        </template>
      </jgsearch>
      <div class="i-table-no-border">
        <Table
          highlight-row
          ref="table"
          :columns="columns"
          :loading="loading"
          :max-height="600"
          :data="data"
          size="small"
        >
          <template slot="wechat" slot-scope="{ row }">
            <a @click="openedits(row)">
              <Avatar
                shape="square"
                size="large"
                class="ivu-fl"
                :src="row.avatar"
              ></Avatar>
              <span class="ivu-ml-8">{{ row.nickname }}</span>
              <br />
              <span class="ivu-ml-8 ivu-weixin"
                >微信号：{{ row.friend_wechatno }}</span
              >
            </a>
          </template>
          <template slot-scope="{ row }" slot="state">
            <Tag v-if="+row.clue_status === 7" color="primary">{{
              row.status_name
            }}</Tag>
            <Tag v-else-if="+row.clue_status === 8" color="success">{{
              row.status_name
            }}</Tag>
            <Tag v-else-if="+row.clue_status === 6" color="default">{{
              row.status_name
            }}</Tag>
            <Tag v-else-if="+row.clue_status === 9" color="warning">{{
              row.status_name
            }}</Tag>
            <Tag v-else>{{ row.status_name }}</Tag>
          </template>
          <template slot-scope="{ row }" slot="tags">
            <tag v-for="item in row.remark_tags" :key="item">{{ item }}</tag>
          </template>
          <template slot-scope="{ row }" slot="info">
            <span v-if="+row.clue_status === 8" class="person">{{
              row.realname
            }}</span>
            <a
              href="javaScript:;"
              v-hasC="{
                name: 'clue-user-contact3',
                flag: 'v1/clue/user/contact',
              }"
              v-else
              @click="openedits(row)"
              >联系</a
            >
            <!-- <a href="javaScript:;" @click="openedits(row)">联系</a> -->
          </template>
          <template slot-scope="{ row }" slot="source_type">
            <span v-if="+row.source_type < 10000 && +row.source_type !== 0"
              >主动</span
            >
            <span v-if="+row.source_type > 10000">被动</span>
          </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
          <Page
            show-total
            show-elevator
            show-sizer
            :total="total"
            :current.sync="params.page"
            :page-size="params.pageSize"
            :page-size-opts="pageOpts"
            @on-change="changepage"
            @on-page-size-change="changepageSize"
          ></Page>
        </div>
        <Drawer v-model="contactModal" width="960" @on-close="closedrawer">
          <div v-if="isshows" style="margin-top: 30px;">
            <div
              style="
                                display: flex;
                                align-items: center;
                                width: 100%;
                                justify-content: space-between;
                            "
            >
              <div
                style="display: flex; align-items: center;"
                v-for="(item, index) in datacontent"
                :key="index"
              >
                <div>
                  <img class="headerImgs" :src="datacontent[0].avatar" alt="" />
                </div>
                <div style="margin-left: 10px;">
                  <div
                    style="
                                            font-size: 16px;
                                            font-weight: 900;
                                        "
                  >
                    {{ datacontent[0].nickname }}
                  </div>
                  <div>
                    <span>
                      微信号：
                      {{
                        datacontent[0].friend_wechatno ||
                          datacontent[0].friendid
                      }}
                    </span>
                    <span style="margin-left: 20px;">
                      地区：
                      {{ datacontent[0].province + datacontent[0].city }}
                    </span>
                  </div>
                </div>
              </div>
              <div v-if="currentBtnShow !== '8'">
                <ButtonGroup>
                  <template v-for="(item, index) in clueList">
                    <Button
                      v-if="
                        +item.value !== 7 &&
                          +item.value !== 8 &&
                          +item.value !== 9
                      "
                      :key="index"
                      @click="handleContact(item.value)"
                      >{{ item.label }}</Button
                    >
                  </template>
                </ButtonGroup>
                <template v-for="item in clueList">
                  <Button
                    style="margin-left: 30px;"
                    type="primary"
                    v-if="+item.value === 8"
                    :key="item.value"
                    @click="handleContact(item.value)"
                    >{{ item.label }}</Button
                  >
                </template>
              </div>
            </div>
          </div>
          <Row :gutter="32">
            <Col span="8">
              <div style="margin-top: 18px;">
                <Select v-model="currentWx" @on-change="changeWx">
                  <Option
                    :value="item.value"
                    v-for="(item, index) in otherWxList"
                    :key="index"
                    >{{ item.label }}</Option
                  >
                </Select>
              </div>
              <div
                class="ivu-mt-16"
                v-if="
                  dataparamslist &&
                    dataparamslist.tags_arr &&
                    dataparamslist.tags_arr.length
                "
              >
                <tag
                  v-for="(item, index) in dataparamslist.tags_arr"
                  :key="index"
                  >{{ item }}</tag
                >
              </div>
              <DescriptionList class="ivu-mt-16" :col="1" v-if="dataparamslist">
                <Description term="来源：">{{
                  dataparamslist.source_type_str
                }}</Description>
                <Description term="备注名：">{{
                  dataparamslist.remark_name
                }}</Description>
                <Description term="微信状态：">
                  <Badge
                    status="success"
                    v-if="+dataparamslist.state === 0"
                    :text="dataparamslist.state_str"
                  ></Badge>
                  <Badge
                    status="warning"
                    v-else-if="+dataparamslist.state === 1"
                    :text="dataparamslist.state_str"
                  ></Badge>
                  <Badge
                    status="error"
                    v-else-if="+dataparamslist.state === 2"
                    :text="dataparamslist.state_str"
                  ></Badge>
                  <Badge
                    status="warning"
                    v-else-if="+dataparamslist.state === 3"
                    :text="dataparamslist.state_str"
                  ></Badge>
                  <Badge
                    status="error"
                    v-else-if="+dataparamslist.state === 4"
                    :text="dataparamslist.state_str"
                  ></Badge>
                </Description>
                <Description term="加好友天数：">{{
                  dataparamslist.create_day
                }}</Description>
                <Description term="未互动天数：">{{
                  dataparamslist.unchat_day
                }}</Description>
                <Description term="通过时间：">{{
                  dataparamslist.create_time
                }}</Description>
              </DescriptionList>
              <Divider class="ivu-mt-8"></Divider>
              <Timeline style="max-height: 400px; overflow: auto;">
                <TimelineItem v-for="item in contactlist" :key="item.id">
                  <p class="time">{{ item.created_at }}</p>
                  <p class="content">{{ item.remark }}</p>
                  <p class="consultant">
                    <span class="ivu-mr-8">{{ item.realname }}</span>
                    <Badge status="processing" :text="item.status_name"></Badge>
                  </p>
                </TimelineItem>
              </Timeline>
            </Col>
            <Col span="16">
              <div class="sky-record ivu-mt-16">
                <chatDetail
                  :paramsrecord="paramsrecord"
                  ref="liaotian"
                ></chatDetail>
              </div>
            </Col>
          </Row>
        </Drawer>
        <Modal
          title="处理信息"
          v-model="showedit"
          width="700"
          @on-cancel="canceledits('formDynamic')"
        >
          <Form
            ref="formDynamic"
            :model="paramsedits"
            label-position="top"
            :rules="createRuless"
          >
            <template v-if="!contactDatas">
              <FormItem label="备注:">
                <Input
                  placeholder="请备注原因"
                  v-model="paramsedits.remark"
                ></Input>
              </FormItem>
            </template>
            <template v-if="contactDatas">
              <FormItem :label-width="20">
                <RadioGroup
                  v-model="paramsedits.patient_user_id"
                  @on-change="changeLabel"
                >
                  <Radio label="1">新客户</Radio>
                  <Radio label="2">老客户</Radio>
                </RadioGroup>
              </FormItem>
              <template v-if="paramsedits.patient_user_id === '2'">
                <FormItem
                  :label-width="20"
                  prop="patient_user_id_1"
                  :rules="oldNameRules"
                >
                  <Select
                    style="width: 300px;"
                    clearable
                    v-model="paramsedits.patient_user_id_1"
                    placeholder="请输入老患者姓名"
                    filterable
                    remote
                    clearable
                    :remote-method="remoteMethod"
                    :loading="loadingcity"
                    @on-change="changOld"
                  >
                    <Avatar
                      :src="require('../../../assets/images/wx.png')"
                      slot="prefix"
                      size="small"
                      v-show="showIcon"
                    ></Avatar>
                    <Option
                      :value="item.value"
                      v-for="item in oldPatient"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </template>
              <template v-if="paramsedits.patient_user_id === '1'">
                <Row :gutter="24">
                  <Col span="5">
                    <FormItem label="姓名">
                      <Input
                        v-model="paramsedits.userName"
                        placeholder="请输入姓名"
                      ></Input>
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="性别">
                      <RadioGroup v-model="paramsedits.sex">
                        <Radio :label="0">未知</Radio>
                        <Radio :label="1">男</Radio>
                        <Radio :label="2">女</Radio>
                      </RadioGroup>
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem label="年龄" prop="age">
                      <InputNumber
                        :max="100"
                        :min="1"
                        v-model="paramsedits.age"
                      ></InputNumber>
                    </FormItem>
                  </Col>
                  <Col span="9">
                    <FormItem label="城市" required>
                      <!-- <Select ref="citySearch" v-model="paramsedits.city" placeholder="请输入城市拼音简写"
                                            filterable remote clearable :remote-method="remoteMethods"
                                            :loading="loadingcity">
                                            <Option v-for="item in optionscity" :value="item.value" :key="item.value">{{
                                                item.label }}</Option>
                                        </Select> -->
                      <jgcheckcity
                        ref="checkcity"
                        @cityvalue="cityvalue"
                        v-model="city_id"
                        :name="`wechat`"
                      ></jgcheckcity>
                    </FormItem>
                  </Col>
                </Row>
                <Row :gutter="24">
                  <Col span="8">
                    <FormItem label="手机号" prop="mobile">
                      <Input
                        v-model="paramsedits.mobile"
                        @on-keyup="
                          paramsedits.mobile = paramsedits.mobile.replace(
                            /\s+|[\r\n]/g,
                            ''
                          )
                        "
                        @on-blur="telrepeat(paramsedits.mobile)"
                        placeholder="请输入手机号"
                      ></Input>
                      <div
                        style="color:#ff9900;font-size:18px"
                        v-if="patientStatus"
                      >
                        ！老患者到诊
                      </div>
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem label="微信号">
                      <Input
                        v-model="paramsedits.weChartNum"
                        @on-keyup="
                          paramsedits.weChartNum = paramsedits.weChartNum.replace(
                            /\s+|[\r\n]/g,
                            ''
                          )
                        "
                        @on-blur="WXrepeat(paramsedits.weChartNum)"
                        placeholder="请输入微信号"
                      ></Input>
                    </FormItem>
                  </Col>
                </Row>
                <Row :gutter="24">
                  <Col span="8">
                    <FormItem label="一级病种" prop="oneDiseases">
                      <Select
                        placeholder="请选择一级病种"
                        v-model="paramsedits.oneDiseases"
                        clearable
                        @on-clear="clearOne"
                        @on-change="changeOne"
                      >
                        <Option
                          v-for="item in diseasesArr1"
                          :value="item.value"
                          :key="item.value"
                        >
                          {{ item.label }}</Option
                        >
                      </Select>
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem
                      label="二级病种"
                      :rules="twoRules"
                      prop="twoDiseases"
                      v-show="diseasesArr2.length > 0"
                    >
                      <Select
                        placeholder="请选择二级病种"
                        v-model="paramsedits.twoDiseases"
                        clearable
                      >
                        <Option
                          v-for="item in diseasesArr2"
                          :value="item.value"
                          :key="item.value"
                        >
                          {{ item.label }}</Option
                        >
                      </Select>
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem label="患者状态" prop="patientStatus">
                      <Select
                        placeholder="请选择"
                        @on-change="changeStatus"
                        v-model="paramsedits.patientStatus"
                        clearable
                      >
                        <Option
                          v-for="item in patientStatusArr"
                          :value="item.value"
                          :disabled="+item.is_select === 0"
                          :key="item.value"
                          >{{ item.label }}</Option
                        >
                      </Select>
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="12">
                    <FormItem
                      label="部位"
                      prop="bodyPart"
                      :rules="bodyPartRule"
                    >
                      <TreeSelect
                        :max-tag-count="2"
                        v-model="paramsedits.bodyPart"
                        :data="postList"
                        clearable
                        multiple
                      ></TreeSelect>
                    </FormItem>
                  </Col>
                  <FormItem
                    label="部门标签"
                    prop="departmentTag"
                    class="ivu-ml-16"
                  >
                    <Select
                      placeholder="请选择"
                      multiple
                      v-model="paramsedits.departmentTag"
                      clearable
                    >
                      <Option
                        v-for="item in departmentTagList"
                        :value="item.value"
                        :key="item.value"
                        >{{ item.label }}</Option
                      >
                    </Select>
                  </FormItem>
                </Row>
                <template
                  v-if="
                    paramsedits.patientStatus === '2' ||
                      paramsedits.patientStatus === '1' ||
                      paramsedits.patientStatus === '33' ||
                      paramsedits.patientStatus === '39' ||
                      paramsedits.patientStatus === '42'
                  "
                >
                  <FormItem label="下次回访时间" prop="day">
                    <Row :gutter="16" type="flex">
                      <Col>
                        <InputNumber
                          :formatter="$inputday"
                          :step="1"
                          :min="0"
                          v-model.number="paramsedits.day"
                          @on-change="blurday(paramsedits.day)"
                        >
                        </InputNumber>
                      </Col>
                      <Col>天后</Col>
                      <Col>
                        <DatePicker
                          :editable="false"
                          :options="optionss"
                          type="date"
                          v-model="DatePicker"
                          @on-change="changeday(DatePicker)"
                          placeholder="请输入回访时间"
                        >
                        </DatePicker>
                      </Col>
                    </Row>
                  </FormItem>
                </template>
                <template v-if="paramsedits.patientStatus === '1'">
                  <FormItem label="预到时间" prop="day1">
                    <Row :gutter="16" type="flex">
                      <Col>
                        <InputNumber
                          :step="1"
                          :min="0"
                          v-model.number="paramsedits.day1"
                          @on-change="blurday1(paramsedits.day1)"
                        >
                        </InputNumber>
                      </Col>
                      <Col>天后</Col>
                      <Col>
                        <DatePicker
                          :editable="false"
                          :options="optionss"
                          type="date"
                          v-model="DatePicker1"
                          @on-change="changeday1(DatePicker1)"
                          placeholder="请输入预约时间"
                        >
                        </DatePicker>
                      </Col>
                    </Row>
                  </FormItem>
                </template>
                <FormItem label="备注" prop="remark">
                  <Input
                    type="textarea"
                    placeholder="请备注原因"
                    v-model="paramsedits.remark"
                    :autosize="{ minRows: 2, maxRows: 8 }"
                  ></Input>
                </FormItem>
              </template>
            </template>
          </Form>
          <div slot="footer">
            <Button @click="canceledits('formDynamic')">取消</Button>
            <Button
              type="primary"
              :loading="remarksloading"
              @click="handlesearch('formDynamic')"
              >确定</Button
            >
          </div>
        </Modal>
      </div>
    </Card>
  </div>
</template>

<script>
import jgsearch from "@/components/search";
// import jgcheckcity from "@/components/checkcity";
import chatDetail from "./chatrecord";
import dayjs from "dayjs";
import mixins from "@/mixins/mixins";

import {
  wechatusercluelist,
  wechatuserclueinfo,
  clueusercontact,
  concatWxPatient,
  wechatmessagelist,
  getOldPatient,
  patientindexsearchcity,
  patientindexsearchmobile,
  repeatbaiyou,
} from "@api/hqapi";
import { departmentList } from "@api/jzy";
let lodash = require("lodash");
export default {
  name: "wechatFriend",
  components: { jgsearch, chatDetail },
  mixins: [mixins],
  props: {
    booltimeButton: { type: Boolean, default: true },
    clue_status_id: { type: [String, Number], default: "" },
    ceshiButton: { type: Boolean, default: false },
    columnsHeader: { type: [String, Number], default: 0 },
    customer: { type: Boolean, default: false },
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        let reg = /^\d{10,12}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的联系号码"));
        }
      }
    };
    return {
      timeButton: 10,
      firstTime: true,
      city_id: [],
      source_type_list: [],
      otherWxList: [],
      postList: [],
      loadingcity: false,
      contactModal: false,
      contactDatas: true,
      oldPatient: [],
      params: {
        page: 1,
        pageSize: 10,
        keyword: "",
        department_id: "",
        clue_status: "",
        wechatno: "",
        source_type: "",
        have_repeat: 0,
        operation_id: "",
        start_time: "",
        end_time: "",
        invalid: 0,
      }, //  请求参数
      datacontent: [],
      currentWx: "",
      remarksloading: false,
      dataid: "",
      dataparamslist: {},
      columns: [
        {
          title: "微信信息",
          slot: "wechat",
          width: 280,
          fixed: "left",
        },
        { title: "微信备注", key: "remark", minWidth: 168 },
        { title: "微信标签", slot: "tags", minWidth: 150 },
        {
          title: "最近沟通时间",
          key: "last_communication_time",
          width: 180,
        },
        {
          title: "客服微信号",
          key: "wechatno",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: "添加方式",
          slot: "source_type",
          minWidth: 120,
          ellipsis: true,
          tooltip: true,
        },
        { title: "归属部门", key: "department_name", width: 118 },
        {
          title: "联系人员",
          key: "operation_name",
          minWidth: 120,
          ellipsis: true,
          tooltip: true,
        },
        { title: "添加时间", key: "created_at", width: 180 },
        { title: "操作", fixed: "right", slot: "info", width: 80 },
      ], // 列表表头
      data: [], // 列表数据
      currentBtnShow: "1",
      searchData: {
        project: [
          {
            id: 1,
            key: "Input",
            placeholder: "请输入微信号/昵称",
            clearable: true,
            style: { width: "160px" },
            value: "",
          },
          {
            id: 12,
            key: "Select",
            placeholder: "添加方式",
            clearable: true,
            style: { width: "100px" },
            value: "",
            childList: [],
            callback: "change",
          },
          {
            id: 3,
            key: "Select",
            placeholder: "部门",
            clearable: true,
            style: { width: "100px" },
            value: "",
            childList: [],
            callback: "changeDepartment",
          },
          {
            id: 6,
            key: "Select",
            placeholder: "客服微信号",
            clearable: true,
            style: { width: "180px" },
            value: "",
            childList: [],
            callback: "change",
          },
          {
            id: 5,
            key: "Select",
            placeholder: "联系人员",
            clearable: true,
            style: { width: "100px" },
            value: "",
            childList: [],
            callback: "change",
          },

          {
            id: 4,
            key: "DatePicker",
            type: "daterange",
            style: { width: "200px" },
            value: [new Date(), new Date()],
            callback: "changetime",
          },
          {
            id: 20,
            key: "slot",
            keys: "timeButton",
          },
          {
            id: 21,
            key: "slot",
            keys: "checkbox",
          },
          {
            id: 22,
            key: "slot",
            keys: "checkbox1",
          },
        ],
      },
      optionss: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 24 * 3600 * 1000;
        },
      },
      createRuless: {
        mobile: [{ validator: validateMobile, trigger: "blur" }],

        city_id: [
          {
            required: true,
            message: "请选择城市",
            trigger: "change",
          },
        ],
        age: [
          {
            required: true,
            message: "请填写年龄",
            type: "number",
            trigger: "blur,change",
          },
        ],
        remark: [
          {
            required: false,
          },
        ],
        oneDiseases: [
          {
            required: true,
            message: "请选择一级病种",
            trigger: "change",
          },
        ],
        patientStatus: [
          {
            required: true,
            message: "请选择患者状态",
            trigger: "change",
          },
        ],
        // patient_user_id_1: [
        //     {
        //         required: true,
        //         message: "请选择老患者",
        //         trigger: ["change",'blur'],
        //     },
        // ],
        day: [
          {
            required: true,
            type: "number",
            message: "请输入回访时间",
            trigger: "change",
          },
        ],
        day1: [
          {
            required: true,
            type: "number",
            message: "请输入预约",
            trigger: "change",
          },
        ],
      },
      optionscity: [],
      patientStatusArr: [],
      diseasesArr2: [],
      contactlist: [],
      diseasesArr1: [],
      showIcon: false,
      clueList: [],
      friend_wechatno: "",
      isshows: true,
      DatePicker: "",
      DatePicker1: new Date(new Date().getTime()),
      preBirthday: "",
      paramsedits: {
        id: undefined,
        clue_status_id: "",
        remark: "",
        day: null,
        bodyPart: [],
        day1: 0,
        type: 3,
        patient_user_id: "1",
        weChartNum: "",
        mobile: "",
        patient_user_id_1: "",
        userName: "",
        age: null,
        birthday: "",
        sex: "",
        city_id: "",
        oneDiseases: "",
        twoDiseases: "",
        patientStatus: "",
        departmentTag: [],
      },
      paramsrecord: { wechat_id: "", friend_id: "" },
      patientStatus: false, // 是否老患者到诊状态
      departmentTagList: [],
    };
  },
  watch: {
    showedit() {
      if (this.showedit) {
        departmentList({ type: 1 }).then((res) => {
          this.departmentTagList = res.project_tags;
        });
      }
    },
  },
  computed: {
    bodyPartRule() {
      if (this.paramsedits.oneDiseases === "1") {
        return {
          required: true,
          validator: (rule, value, callback) => {
            if (value.length) {
              callback();
            } else {
              callback(new Error("请选择部位"));
            }
          },
          trigger: "change",
        };
      } else {
        return {
          required: false,
          type: "array",
          trigger: "change",
        };
      }
    },
    twoRules() {
      if (this.diseasesArr2.length) {
        return {
          required: true,
          message: "请选择二级病种",
          trigger: "change",
        };
      } else {
        return {
          required: false,
        };
      }
    },
    dayRules() {
      if (this.paramsedits.patient_user_id === "1") {
        return {
          required: true,
          type: "number",
          message: "请输入下次回访时间",
          trigger: "blur",
        };
      } else {
        return {
          required: false,
        };
      }
    },
    birthdays() {
      if (this.paramsedits.age !== "") {
        var year = new Date().getFullYear() - this.paramsedits.age;
        return year + "-01" + "-01";
      }
    },
    oldNameRules() {
      if (this.paramsedits.patient_user_id === "2") {
        return {
          required: true,
          message: "请选择老患者姓名",
          trigger: "change",
        };
      } else {
        return {
          required: false,
        };
      }
    },
  },

  methods: {
    changeStatus() {
      this.paramsedits.day = null;
      this.DatePicker = "";
      this.$refs["formDynamic"].fields.forEach((item) => {
        if (item.prop == "day") {
          item.resetField();
        }
      });
    },
    initials(menuName) {
      if (this.firstTime) {
        if (this.booltimeButton) {
          this.searchData.project.forEach((item) => {
            if (item.id === 4) {
              item.value = [this.$Date().subtract(10, "day"), this.$Date()];
              this.params.start_time = item.value[0];
              this.params.end_time = item.value[1];
            }
          });
        }
        if (this.columnsHeader == 1) {
          let length = this.columns.length - 3;
          let columnsing = {
            title: "联系次数",
            key: "contact_count",
            minWidth: 168,
          };
          this.columns.splice(length, 0, columnsing);
        }
        this.params.clue_status_id = this.clue_status_id;
        this.askData();
        this.firstTime = false;
      }
    },
    timeButtons(num) {
      this.searchData.project.forEach((item) => {
        if (item.id === 4) {
          item.value = [this.$Date().subtract(num, "day"), this.$Date()];
          this.params.start_time = item.value[0];
          this.params.end_time = item.value[1];
          this.timeButton = num;
        }
      });
      this.askData();
    },
    cityvalue(city) {
      this.city_id = city;
      this.paramsedits.city_id = city.join(",");

      // this.askData();
    },
    /* @函数功能: 初始化 */
    initial() {
      this.funaskData = wechatusercluelist;
      this.funupdate = concatWxPatient;
      // this.askData();
    },
    changeLabel(value) {
      this.$refs.formDynamic.resetFields();
    },
    /* @函数功能: 请求数据 */
    askDatas(res) {
      if (this.params.page === 1) {
        this.clueList = res.clue_status_id;
        //  console.log(this.clueList,'this.clueList')
        this.searchData.project.forEach((item) => {
          if (item.id === 3) item.childList = res.department;
          else if (item.id === 5) item.childList = res.operation_member;
          else if (item.id === 6) {
            if (this.params.department_id) {
              item.childList = res.wechatno
                .filter((ee) => {
                  return ee.department_id === this.params.department_id;
                })
                .map((vv) => {
                  return {
                    label: vv.wechatno,
                    value: vv.wechatno,
                    ...vv,
                  };
                });
            } else {
              item.childList = res.wechatno.map((vv) => {
                return {
                  label: vv.wechatno,
                  value: vv.wechatno,
                  ...vv,
                };
              });
            }
          } else if (item.id === 12) {
            item.childList = res.source_type;
          }
        });
      }

      this.data = Object.freeze(res.list.list);
      this.total = res.list.total;
      let params = { key: "wechat", total: res.list.total };
      this.$emit("returntotal", params);
    },
    /* @函数功能: 分页 */
    // formSize (e) {
    //     //  console.log('222')
    //     this.params.page = e;
    //     this.askData();
    // },
    /* @函数功能: 每页数量 */
    // formChangePage (e) {
    //     console.log('111')
    //     this.params.pageSize = e;
    //     this.askData();
    // },
    closedrawer() {
      this.$refs.formDynamic.resetFields();
      this.paramsedits = {
        id: undefined,
        clue_status_id: "",
        remark: "",
        day: 1,
        weChartNum: "",
        mobile: "",
        day1: 0,
        bodyPart: [],
        type: 3,
        patient_user_id: "1",
        patient_user_id_1: "",
        userName: "",
        age: null,
        birthday: "",
        sex: "",
        city_id: "",
        oneDiseases: "",
        twoDiseases: "",
        patientStatus: "",
        departmentTag: [],
      };
      this.currentWx = "";
      this.diseasesArr1 = [];
      this.diseasesArr2 = [];
      //this.askData();
    },
    clearOne() {
      this.diseasesArr2 = [];
      this.paramsedits.twoDiseases = "";
    },
    changeDepartmentFun(value) {
      this.searchData.project.forEach((item) => {
        if (item.id === 6) {
          item.value = "";
          this.params.wechatno = "";
          this.askDatachanges();
        }
      });
    },
    changeOne(value) {
      if (value) {
        this.paramsedits.twoDiseases = "";
        this.diseasesArr2 = this.diseasesArr1.filter((ee) => {
          return ee.value == value;
        })[0].children;
        if (!this.diseasesArr2.length) {
          this.$nextTick(() => {
            this.$refs.formDynamic.validateField("twoDiseases");
          });
        }
      }
    },
    searchparams() {
      this.timeButton = null;
      this.params.keyword = this.searchDatas(1);
      if (this.searchDatas(1) !== "") {
        if (JSON.stringify(this.searchDatas(4)) !== JSON.stringify(["", ""])) {
          let timer = [
            this.$Date(this.searchDatas(4)[0]).format("YYYY-MM-DD"),
            this.$Date(this.searchDatas(4)[1]).format("YYYY-MM-DD"),
          ];
          this.storage.set("clue-wechat", timer);
          this.searchData.project.forEach((item) => {
            if (item.id === 4) item.value = ["", ""];
          });
          this.params.start_time = "";
          this.params.end_time = "";
        }
      } else {
        this.searchData.project.forEach((item) => {
          if (item.id === 4) {
            if (
              JSON.stringify(this.storage.get("clue-wechat")) !==
              JSON.stringify(["", ""])
            ) {
              item.value = this.storage.get("clue-wechat");
              this.params.start_time = item.value[0];
              this.params.end_time = item.value[1];
            }
          }
        });
      }
      this.params.page = 1;
      this.params.pageSize = 15;
      this.params.department_id = "";
      this.params.wechatno = "";
      this.params.source_type = "";
      this.params.operation_id = "";
      this.params.wechatid = "";
      this.searchData.project.forEach((item) => {
        if (item.id === 3) item.value = "";
        if (item.id === 5) item.value = "";
        if (item.id === 6) item.value = "";
      });
    },
    searchDatas(num) {
      let value;
      this.searchData.project.forEach((item) => {
        if (item.id === num) value = item.value;
      });
      return value;
    },
    askDatachanges(value) {
      this.params.page = 1;
      this.params.pageSize = 10;
      this.params.source_type = this.searchDatas(12);
      this.params.keyword = this.searchDatas(1);
      this.params.department_id = this.searchDatas(3);
      this.params.operation_id = this.searchDatas(5);
      this.params.wechatno = this.searchDatas(6);
      this.params.start_time = this.searchDatas(4)[0];
      this.params.end_time = this.searchDatas(4)[1];
      let timer = ["", ""];
      if (JSON.stringify(this.searchDatas(4)) !== JSON.stringify(["", ""])) {
        timer = [
          this.$Date(this.searchDatas(4)[0]).format("YYYY-MM-DD"),
          this.$Date(this.searchDatas(4)[1]).format("YYYY-MM-DD"),
        ];
      }
      this.storage.set("clue-wechat", timer);
      this.askDatachange();
    },
    askDatachangestime() {
      this.timeButton = null;
      this.askDatachanges();
    },
    openedits(row) {
      this.currentBtnShow = row.clue_status;
      this.$refs.formDynamic.resetFields();
      this.paramsedits.id = row.id;
      this.paramsedits.weChartNum = row.friend_wechatno;
      this.friend_wechatno = row.friend_wechatno;
      this.axiosWxInfo(this.friend_wechatno, this.paramsedits.id);
    },
    axiosWxInfo(friend_wechatno, id, value) {
      wechatuserclueinfo({
        friend_wechatno,
        id,
      }).then((res) => {
        this.datacontent = res.list;
        if (res.list.length > 0) {
          this.currentWx = this.currentWx
            ? this.currentWx
            : res.list[0].wechat_list[0]
            ? res.list[0].wechat_list[0].wechatid
            : "";
        }
        if (res.default_city && JSON.stringify(res.default_city) !== "{}") {
          this.optionscity = [
            {
              value: res.default_city.city_id,
              label: res.default_city.city_name,
            },
          ];
        }
        this.postList = res.body_parts_list;
        this.contactlist = res.contact;
        this.diseasesArr1 = res.diseases;
        this.patientStatusArr = res.patient_status;
        this.paramsedits.patientStatus = "2";
        if (this.currentWx) {
          this.contactModal = true;
          this.dataparams(res.list[0].id);
        } else {
          this.$Message.error("未绑定客服微信");
        }
      });
    },
    changOld(value) {
      if (this.oldPatient.length && value) {
        let one = this.oldPatient.find((ee) => {
          return ee.patient_user_id === value;
        });
        if (one.wechat_id === "") {
          this.showIcon = false;
        } else {
          this.showIcon = true;
        }
      } else {
        this.showIcon = false;
      }
    },
    wechatmessagelists(row) {
      this.otherWxList = row.wechat_list.map((ee) => {
        return {
          ...ee,
          value: ee.wechatid,
          label: ee.wechatnick,
          friend_wechatno: ee.wechatno,
        };
      });

      this.paramsrecord.wechat_id = row.wechat_list[0]
        ? row.wechat_list[0].wechatid
        : "";
      this.paramsrecord.friend_id = row.friendid;
      this.$nextTick(() => {
        this.$refs.liaotian.askDatas("end");
      });
    },
    dataparams(id) {
      this.dataid = id;
      this.datacontent.forEach((item) => {
        if (item.id === id) {
          this.dataparamslist = item.wechat_list[0];
          this.wechatmessagelists(item);
        }
      });
    },
    getDatas: lodash.debounce(function(params) {
      if (
        this.oldPatient.every((ee) => {
          return ee.label !== params;
        })
      ) {
        this.loadingcity = true;
        getOldPatient({
          user_name: params,
        }).then((res) => {
          this.$nextTick(() => {
            this.loadingcity = false;
            this.oldPatient = Object.freeze(
              res.map((ee) => {
                return {
                  ...ee,
                  value: ee.patient_user_id,
                  label:
                    ee.user_name +
                    " " +
                    (ee.gender === "0"
                      ? "未知"
                      : ee.gender === "1"
                      ? "男"
                      : "女") +
                    " " +
                    ee.age +
                    (ee.age ? "岁" : "") +
                    " " +
                    ee.mobile,
                };
              })
            );
          });
        });
      }
    }, 700),
    remoteMethod(query) {
      if (query !== "") {
        this.getDatas(query);
      } else {
        this.oldPatient = [];
      }
    },
    remoteMethods(query) {
      if (query !== "") {
        this.getDatass(query);
      } else {
        this.optionscity = [];
      }
    },
    getDatass: lodash.debounce(function(params) {
      if (
        this.optionscity.every((ee) => {
          return ee.label !== params;
        })
      ) {
        this.loadingcity = true;
        patientindexsearchcity({
          keywords: params,
        }).then((res) => {
          this.$nextTick(() => {
            this.loadingcity = false;
            this.optionscity = Object.freeze(
              res.list.map((ee) => {
                return {
                  value: ee.value + "," + params,
                  label: ee.label,
                };
              })
            );
          });
        });
      }
    }, 700),
    handleContact(state) {
      this.paramsedits.clue_status_id = state;
      this.openedit(state);
      for (let item of this.clueList) {
        if (state === item.value) {
          if (+item.value === 8) {
            // this.paramsedits.patient_user_id = "1";
            this.contactDatas = true;
          } else {
            this.contactDatas = false;
          }
        }
      }
    },
    changeWx(value) {
      if (value) {
        this.paramsrecord.wechat_id = value;
        this.$nextTick(() => {
          this.$refs.liaotian.askDatas("end");
        });
      }
      // if (value) {
      //     let friend_wechatno = this.otherWxList.find(
      //         (ee) => ee.wechatid === value
      //     ).wechatno;
      //     this.dataparamslist = this.datacontent[0].wechat_list.filter(ee => ee.wechatid === value)[0]
      //     this.axiosWxInfo(friend_wechatno, this.paramsedits.id, value);
      //     this.$set(this.paramsrecord, 'wechat_id', value);
      // }
    },
    paramsedit() {
      this.paramsedits.day = null;
      this.paramsedits.remark = "";
      this.DatePicker = "";
    },
    paramscancel() {
      this.paramsedit();
    },
    /* @函数功能: 取消编辑或新增 */

    canceledits(name) {
      // if (name) this.$refs[name].resetFields();

      this.city_id = [];
      this.showedit = false;
      // this.paramscancel();
    },
    /* @函数功能: 提交编辑或新增 */

    // 搜索手机号
    handlesearch(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.city_id = [];
          if (this.paramsedits.clue_status_id === "8") {
            this.remarksloading = true;
            let config = {
              id: this.paramsedits.id === undefined ? 0 : this.paramsedits.id,
              mobile: this.paramsedits.mobile,
              wechat_id: this.paramsedits.weChartNum,
            };
            patientindexsearchmobile(config).then((res) => {
              if (+res.result === 1) {
                this.$Modal.confirm({
                  title: "提示",
                  content: "<p>该手机号码已存在，是否继续录入?</p>",
                  onOk: () => {
                    this.submitedits(name);
                  },
                  onCancel: () => {
                    this.remarksloading = false;
                  },
                });
              } else if (+res.result === 2) {
                this.$Modal.confirm({
                  title: "提示",
                  content: "<p>该微信号已存在，是否继续录入?</p>",
                  onOk: () => {
                    this.submitedits(name);
                  },
                  onCancel: () => {
                    this.remarksloading = false;
                  },
                });
              } else if (+res.result === 3) {
                this.$Modal.confirm({
                  title: "提示",
                  content: "<p>该手机号/微信号已存在，是否继续录入?</p>",
                  onOk: () => {
                    this.submitedits(name);
                  },
                  onCancel: () => {
                    this.remarksloading = false;
                  },
                });
              } else {
                this.submitedits(name);
              }
            });
          } else {
            this.submitedits(name);
          }
        }
      });
    },
    submitedits(name) {
      if (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.submiteditss();
          }
        });
      } else {
        this.submiteditss();
      }
    },
    submiteditss() {
      let config = this.paramssubmit();
      if (config) {
        this.remarksloading = true;
        if (!this.edits) {
          this.funupdate(config)
            .then((res) => {
              this.remarksloading = false;
              if (+res.clue_status_id === 8) {
                this.contactModal = false;
                this.showedit = false;
                this.askData();
                this.diseasesArr2 = [];
                this.paramsedits = {
                  id: undefined,
                  clue_status_id: "",
                  remark: "",
                  day: 1,
                  day1: 0,
                  weChartNum: "",
                  mobile: "",
                  type: 3,
                  bodyPart: [],
                  patient_user_id: "1",
                  patient_user_id_1: "",
                  userName: "",
                  age: null,
                  birthday: "",
                  sex: "",
                  city_id: "",
                  oneDiseases: "",
                  twoDiseases: "",
                  patientStatus: "",
                  departmentTag: [],
                };
                this.$refs.formDynamic.resetFields();
              } else {
                this.beforsubmits();
              }
            })
            .catch(() => {
              this.remarksloading = false;
            });
        } else {
          this.funcreate(config)
            .then(() => {
              this.remarksloading = false;
              this.beforsubmits();
            })
            .catch(() => {
              this.remarksloading = false;
            });
        }
      }
    },
    /* @函数功能: 提交之后数据处理 */
    beforsubmits() {
      this.$Message.success("处理成功");
      this.paramscancel();
      // 打开抽屉需带的参数
      // this.openedits({
      //     id: this.paramsedits.id,
      //     friend_wechatno: this.friend_wechatno
      // });
      this.city_id = [];
      this.showedit = false;
      this.contactModal = false;
      this.askData();
    },
    telrepeat(data) {
      let config = {
        id: this.paramsedits.id === undefined ? 0 : this.paramsedits.id,
        mobile: data,
      };
      patientindexsearchmobile(config).then((res) => {
        if (+res.result === 1) {
          this.$Message.error({
            duration: 2.5,
            content: "该手机号码已存在",
          });
        }
      });
      repeatbaiyou({ mobile: data }).then((res) => {
        // console.log(res,'res')
        this.patientStatus = res;
      });
    },
    WXrepeat(data) {
      let config = {
        id: this.paramsedits.id === undefined ? 0 : this.paramsedits.id,
        wechat_id: data,
      };

      patientindexsearchmobile(config).then((res) => {
        if (+res.result === 2) {
          this.$Message.error({
            duration: 2.5,
            content: "该微信号已存在",
          });
        }
      });
    },
    paramssubmit() {
      let config = {
        id: this.paramsedits.id,
        clue_status_id: this.paramsedits.clue_status_id,
        day: parseInt(new Date(this.DatePicker).getTime() / 1000),
        type: 3,
        patient_status_id:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.patientStatus
            : "",
        user_name:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.userName
            : "",
        age:
          this.paramsedits.clue_status_id === "8" ? this.paramsedits.age : "",
        // birthday:
        //     this.paramsedits.clue_status_id === "8"
        //         ? this.paramsedits.age === this.preBirthday
        //             ? this.paramsedits.birthday
        //                 ? this.paramsedits.birthday
        //                 : this.birthdays
        //             : this.birthdays
        //         : "",
        birthday: this.paramsedits.clue_status_id === "8" ? this.birthdays : "",
        patient_diseases_id:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.oneDiseases
            : "",
        patient_diseases_child_id:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.twoDiseases
            : "",
        patient_remake:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.remark
            : "",
        city_id:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.city_id
            : "",

        appointment_day: parseInt(new Date(this.DatePicker1).getTime() / 1000),
        gender:
          this.paramsedits.clue_status_id === "8" ? this.paramsedits.sex : "",
        // city_name: this.paramsedits.city
        //     ? this.optionscity.filter(
        //         (ee) => ee.value === this.paramsedits.city
        //     )[0].label
        //     : "",
        patient_user_id:
          this.paramsedits.patient_user_id === "2"
            ? this.paramsedits.patient_user_id_1
            : "",
        friend_wechatno:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.weChartNum
            : "",
        mobile:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.mobile
            : "",
        body_parts_id:
          this.paramsedits.clue_status_id === "8"
            ? this.paramsedits.bodyPart.join(",")
            : "",
        project_ids: this.paramsedits.departmentTag.join(","),
      };
      let config1 = {
        id: this.paramsedits.id,
        clue_status_id: this.paramsedits.clue_status_id,
        remark: this.paramsedits.remark,
        day: 1,
        type: 3,
      };
      return this.paramsedits.clue_status_id === "8" ? config : config1;
    },
    blurday(num) {
      this.DatePicker = this.$blurday(num);
    },
    changeday(date) {
      this.paramsedits.day = this.$changeday(date);
    },
    blurday1(num) {
      this.DatePicker1 = this.$blurday(num);
    },
    changeday1(date) {
      this.paramsedits.day1 = this.$changeday(date);
    },
    checkbox3(e) {
      this.params.page = 1;
      this.params.have_repeat = e.length;
      this.searchData.project.forEach((item) => {
        if (item.id === 4) {
          item.value = [];
          this.timeButton = null;
          this.params.start_time = item.value[0];
          this.params.end_time = item.value[1];
        }
      });
      this.askData();
    },
    checkbox4(e) {
      this.params.page = 1;
      this.params.invalid = e.length;
      this.searchData.project.forEach((item) => {
        if (item.id === 4) {
          item.value = [];
          this.timeButton = null;
          this.params.start_time = item.value[0];
          this.params.end_time = item.value[1];
        }
      });
      this.askData();
    },
    checkbox5(e) {
      this.params.page = 1;
      this.params.clue_status_id = e.length ? 28 : this.clue_status_id;
      this.searchData.project.forEach((item) => {
        if (item.id === 4) {
          item.value = [];
          this.timeButton = null;
          this.params.start_time = item.value[0];
          this.params.end_time = item.value[1];
        }
      });
      this.askData();
    },
  },
  mounted() {
    if (this.$route.path === "/business/newClue/newData") {
      for (let i = 0; i < this.columns.length; i++) {
        if (this.columns[i].title == "联系人员") {
          this.columns.splice(i, 1);
        }
      }
      for (let i = 0; i < this.searchData.project.length; i++) {
        if (this.searchData.project[i].placeholder == "联系人员") {
          this.searchData.project.splice(i, 1);
        }
      }
    }
    this.timeButtons(10);
  },
};
</script>

<style scoped>
/deep/.ivu-modal-mask {
  z-index: 1000 !important;
}
/deep/ .ivu-modal-wrap {
  z-index: 1000 !important;
}
.headerImgs {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.ivu-weixin {
  color: #777;
  font-size: 12px;
}

.sky-wxid {
  color: #777;
  margin-top: 2px;
  font-size: 12px;
}

.sky-record {
  /* border: 1px solid #dcdcdc; */
  min-height: 600px;
}

.ivu-active {
  border: 1px solid #2d8cf0;
}

.ivu-active:hover {
  border: 1px solid #2d8cf0 !important;
}

.person {
  color: #999;
}

/* 时间轴 */
.time {
  font-size: 14px;
  font-weight: bold;
}

.content {
  padding: 10px 0;
}

.consultant {
  color: #9ea7b4;
}

h4 span {
  margin-left: 5px;
}

.side-bg {
  background: #f2f2f2;
  padding: 24px !important;
}

.return-form {
  padding: 24px;
}

.title {
  font-weight: bold;
  font-size: 16px;
  padding: 24px 0 0 24px;
}

.sky-screen {
  margin-top: 16px;
}

.sky-s1 {
  font-size: 14px;
  margin: 0 16px;
  color: #666;
}

.sky-s2 {
  font-size: 12px;
  margin-right: 10px;
  color: #888;
}

.sky-note {
  padding: 5px 0;
}
</style>
<style scoped></style>
